﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Slickflow Designer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="~/Content/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-theme-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-dialog.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-progressbar-3.3.4.min.css" />

    <link rel="stylesheet" href="~/Content/ag-grid/ag-grid.css" />
    <link rel="stylesheet" href="~/Content/ag-grid/theme-bootstrap.css" />

    <link rel="stylesheet" href="~/Content/graphCanvas.css"/>
    <link rel="stylesheet" href="~/Content/msgBoxLight.css" />

    <style type="text/css" media="screen">
        div.base {
            position: absolute;
            overflow: hidden;
            font-family: Arial;
            font-size: 8pt;
        }

        div.base#kgraphContainer {
            border-style: solid;
            border-color: #F2F2F2;
            border-width: 1px;
            background: url('Scripts/mxGraph/src/editor/images/grid.gif');
        }

        hr {
            border-top: 1px solid #000000 !important;
            margin-bottom: 5px !important;
            margin-top: 5px !important;
        }
    </style>

    <script type="text/javascript">
		mxBasePath = "Scripts/mxGraph/src";
    </script>

    
</head>
<body>
    <div class="container" id="barTopMenu">
        <div class="row" style="margin-left:60px;">
            <div style="float:left;">
                <a href="#" class="btn btn-info" onclick="kmain.createProcess();"><span class="glyphicon glyphicon-file lang" as="new"> </span> </a>
                <a href="#" class="btn btn-info" onclick="kmain.openProcess();"><span class="glyphicon glyphicon-share lang" as="open"> </span></a>
                <a href="#" class="btn btn-info" onclick="kmain.saveProcessFile();"><span class="glyphicon glyphicon-ok lang" as="save"> </span></a>
            </div>
            <div class="dropdown" style="float:left;margin-left: 5px;">
                <a class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-wrench lang" as="tools"> </span><span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="content" onclick="kmain.previewXml();"></a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="importxml" onclick="kmain.importDiagram();"></a></li>
                </ul>
            </div>
            <div class="dropdown" style="float:left;margin-left: 5px;">
                <a class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th lang" as="options"> </span><span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="slickflowgraphtutorial" onclick="kmain.gotoTutorial();"></a></li>
                    <li class="divider">&nbsp</li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="en" onclick="kmain.changeLang('en');"></a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="lang" as="zh" onclick="kmain.changeLang('zh');"></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="kgraphContainer" style="overflow: scroll;" class="base">
        <!-- Graph Here -->
    </div>

    <div id="status" class="base" align="right" style="white-space:nowrap;">
        <!-- Status Here -->
    </div>

    <!--Progress Bar-->
    <div class="modal js-loading-bar">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery -->
    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/later.min.js"></script>

    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-dialog.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-progressbar.min.js"></script>

    <!-- ag-grid-->
    <script type="text/javascript" src="~/Scripts/ag-grid/ag-grid.min.js"></script>

    <!--helper-->
    <script type="text/javascript" src="~/Scripts/slick.event.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>
    <script type="text/javascript" src="~/Scripts/xmlhelper.js"></script>
    <script type="text/javascript" src="~/Scripts/vkbeautify.js"></script>
    <script type="text/javascript" src="~/Scripts/XMLWriter-1.0.0-min.js"></script>

    <script type="text/javascript" src="~/Scripts/mxGraph/src/mxClient.js"></script>

    <!-- Slickflow kgraph main files -->
    <script type="text/javascript" src="~/ViewJS/mxfile.js"></script>
    <script type="text/javascript" src="~/ViewJS/kloader.js"></script>
    <script type="text/javascript" src="~/ViewJS/kmain.js"></script>
    <script type="text/javascript" src="~/ViewJS/kmodel.js"></script>
    <script type="text/javascript" src="~/ViewJS/kresource.js"></script>
    <script type="text/javascript" src="~/ViewJS/kvalidator.js"></script>
    <script type="text/javascript" src="~/ViewJS/mxtoolkit.js"></script>
    <script type="text/javascript" src="~/ViewJS/mxconfig.js"></script>
    <script type="text/javascript" src="~/ViewJS/processlist.js"></script>
    <script type="text/javascript" src="~/ViewJS/processmodel.js"></script>
    <script type="text/javascript" src="~/ViewJS/activityproperty.js"></script>
    <script type="text/javascript" src="~/ViewJS/transitionproperty.js"></script>
    <script type="text/javascript" src="~/ViewJS/cronmanager.js"></script>
    <script type="text/javascript" src="~/ViewJS/rolelist.js"></script>
    <script type="text/javascript" src="~/Scripts/codemirror/lib/codemirror-csharp.js"></script>
    @*<script type="text/javascript" src="~/ViewJS/kmx.min.js"></script>*@

    <script type="text/javascript">
        mxGraph.prototype.htmlLabels = true;
        mxGraph.prototype.allowLoops = true;

        mxGraph.prototype.isWrapping = function (cell) {
            return true;
        };

        mxConstants.DEFAULT_HOTSPOT = 1;

        // Enables guides
        mxGraphHandler.prototype.guidesEnabled = true;

        // Alt disables guides
        mxGuide.prototype.isEnabledForEvent = function (evt) {
            return !mxEvent.isAltDown(evt);
        };

        // Enables snapping waypoints to terminals
        mxEdgeHandler.prototype.snapToTerminals = true;

        window.onbeforeunload = function () { return mxResources.get('changesLost'); };
    </script>

    <script type="text/javascript">
        $(function () {
            //load lang
            kresource.localize();

            //initialize
            kmain.init();
            kmain.initializeMxGraphEditor();

            var processID = '@ViewBag.ProcessID';
            if (processID !== '') {
                //load process diagram from GC outer aplication
                processlist.openProcessDiagram(processID);
            }
        });
    </script>
</body>
</html>
